<template>
  <div class="app-container purchasewarehouseorder">
    <div>
      <el-button type="primary" class="filter-item" @click="toskuInfoExpor">采购商品数据导出</el-button>
      <el-button type="primary" class="filter-item" @click="skuHandleExport">将excel修改价格导入到商品</el-button>
      <el-button type="primary" class="filter-item" @click="skuHandleTongbu">将本次修改价格同步到门店</el-button>
    </div>
    <!-- 订单详情 -->
    <div class="order-info">
      <el-col v-if="purchaseOrder.orderState == '-1'"><div class="bg-red" style="padding-bottom: 10px;padding-left: 50px;">驳回理由：{{ purchaseOrder.pOrderAuditComment }}</div></el-col>
      <el-card v-loading="orderInfoLoading" class="box-card">
        <el-row>
          <el-col :span="10" :offset="2">单据编号：{{ purchaseOrder.pOrderNo }}</el-col>
          <el-col :span="10" :offset="2">状&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;态：{{ purchaseOrder.orderState | formatStatus }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="10" :offset="2">仓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;库：{{ purchaseOrder.warehouseName }}</el-col>
          <el-col :span="10" :offset="2">创建时间：{{ purchaseOrder.gmtCreate | formatDateAndTime }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="10" :offset="2">操&nbsp;&nbsp;作&nbsp;&nbsp;人：{{ purchaseOrder.adminRealname }}</el-col>
          <el-col :span="10" :offset="2">备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注：{{ purchaseOrder.pOrderInfo }}</el-col>
        </el-row>
      </el-card>
    </div>
    <!-- 入库详情 -->
    <div class="p-order-goods-info" >
      <el-col :span="6"><div >供应商：{{ purchaseOrder.supplierName }}</div></el-col>
      <el-col :span="6"><div >商品总额：{{ purchaseOrder.pOrderGoodsAmount }}元</div></el-col>
      <el-col :span="6"><div >优惠：{{ purchaseOrder.pOrderConpon }}元</div></el-col>
      <el-col :span="6" style="text-align: right;">
        <el-button type="primary" size="mini" @click="handlePrint">打印</el-button>
      </el-col>
      <div class="p-order-goods-list">
        <el-table
          v-loading="pOrderGoodsLoading"
          :data="pOrderGoodsList"
          size="small"
          element-loading-text="正在查询中。。。"
          border
          fit
          highlight-current-row
          style="white-space: pre-line;"
        >
          <el-table-column align="center" label="商品" prop="goodsName" width="200px" style="display: inline-block;">
            <template slot-scope="scope">
              <el-col :span="6"><img :src="scope.row.goodsImg + '?x-oss-process=style/100px'" width="40" ></el-col>
              <el-col :span="18" style="padding-top: 15px;">{{ scope.row.goodsName }}</el-col>
            </template>
          </el-table-column>
          <el-table-column prop="goodsUnit" align="center" label="单位"/>
          <el-table-column align="center" label="条形码" prop="barCode" />
          <el-table-column align="center" label="计划数量" prop="pGoodsBuyNum" />
          <el-table-column align="center" label="实际数量" prop="pGoodsActualNum" />
          <el-table-column align="center" label="单价" >
            <template slot-scope="scope">
              <el-col>{{ Math.round(scope.row.pGoodsPrice*100)/100 }}</el-col>
            </template>
          </el-table-column>
          <el-table-column align="center" label="总金额" >
            <template slot-scope="scope">
              <el-col>{{ (scope.row.pGoodsAmount) }}</el-col>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 操作日志 -->
    <div class="p-order-log" >
      <el-col :span="4"><div >操作日志</div></el-col>
      <div class="p-order-goods-list">
        <el-table
          v-loading="pOrderLogsLoading"
          :data="pOrderLogsList"
          size="small"
          element-loading-text="正在查询中。。。"
          border
          fit
          highlight-current-row
          style="white-space: pre-line;"
        >
          <el-table-column align="center" label="操作时间" width="200" >
            <template slot-scope="scope">
              {{ scope.row.gmtCreate | formatDateAndTime }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作人" prop="operUser" />
          <el-table-column align="center" label="状态" >
            <template slot-scope="scope">
              {{ scope.row.orderState | formatStatus }}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-dialog
      :visible.sync="importDialogVisible"
      title="导入商品信息"
      width="35%"
    >
      <el-dialog
        :visible.sync="innerImportDialogVisible"
        width="30%"
        title="系统提示"
        append-to-body>
        <el-row style="margin-bottom: 20px;">
          <el-col :span="4">总计:{{ allResult }}</el-col>
          <el-col :span="4">成功:{{ successResult }}</el-col>
          <el-col :span="4">失败:{{ errResult }}</el-col>
        </el-row>
        <el-row v-if="errResult && errResult > 0">
          <el-col :span="4"><el-button type="primary" @click="handleErrResult">导出错误信息</el-button></el-col>
        </el-row>
      </el-dialog>
      <div style="border:none;">
        <el-button icon="el-icon-document-copy" type="primary" size="small" style="margin-left: 15px;" @click="checkFile">选择文件</el-button>
        <span>{{ fileName }}</span>
        <el-input id="fileinput" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" type="file" style="display: none;" @change="checkFileSure"/>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button :disabled="(!fileName)" :loading="importOptLoading" type="primary" @click="toImportExcel">导 入</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="tongbuDialogVisible" title="同步门店" width="35%">
      <!-- 查询结果 -->
      <el-table
        v-loading="listLoading"
        ref="multipleTable"
        :data="storeList"
        size="small"
        element-loading-text="正在查询中。。。"
        @selection-change="selectionLineChangeHandle"
      >
        <el-table-column min-width="140" type="selection"/>
        <el-table-column prop="storeName" align="center" label="名称"/>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="toTongbuStore">同步</el-button>
      </span>
    </el-dialog>
    <!-- 打印 -->
    <el-dialog title="打印" :visible.sync="dialogTableVisible" class="printBox">
      <printHtml :outbound="5" :pOrderId="pOrderId" />
    </el-dialog>
  </div>

</template>

<style>
  .bg-red {
    color: #F56C6C;
  }
  .order-info .el-row {
    margin-bottom: 20px;
  }
  .p-order-goods-info {
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .p-order-goods-list{
    padding-top: 40px;
  }

</style>
<script>
import { detail, skuInfoExportData, importExcel, queryStore, tongbuStore } from '@/api/purchaseorder'
import { formatDateAndTime } from '@/filters'

export default {
  name: 'PurchaseOrderDetail',
  components: {},
  filters: {
    formatGmt(time) {
      if (time == null || time === '') {
        return '无'
      }
      return formatDateAndTime(time)
    },
    formatStatus(status) {
      if (status === 1) {
        return '已采购'
      } else if (status === 0) {
        return '待采购'
      } else if (status === -1) {
        return '驳回'
      }
    }
  },
  data() {
    return {
      dialogTableVisible: false,
      pOrderId: '',
      purchaseOrder: {
        id: this.$route.query.pOrderId,
        pOrderNo: undefined,
        gmtCreate: ''
      },
      storeForm: {
        storeIds: [],
        pOrderId: this.$route.query.pOrderId
      },
      dataonLineListSelections: [],
      purchaseOrderId: this.$route.query.pOrderId,
      pOrderGoodsLoading: true,
      pOrderGoodsList: [],
      storeList: [],
      pOrderLogsLoading: true,
      pOrderLogsList: [],
      orderInfoLoading: true,
      importDialogVisible: false,
      tongbuDialogVisible: false,
      innerImportDialogVisible: false,
      successResult: 0,
      errResult: 0,
      allResult: 0,
      importOptLoading: false,
      uploadForm: new FormData(),
      fileName: '',
      file: ''
    }
  },
  created() {
    this.orderDetail()
  },
  methods: {
    selectionLineChangeHandle(val) {
      this.dataonLineListSelections = val
    },
    orderDetail() {
      this.pOrderGoodsLoading = true
      this.pOrderLogsLoading = true
      this.orderInfoLoading = true
      detail(this.purchaseOrder).then(response => {
        this.purchaseOrder = response.data.data
        this.pOrderGoodsLoading = false
        this.pOrderLogsLoading = false
        this.orderInfoLoading = false
        this.pOrderGoodsList = this.purchaseOrder.purchaseOrderGoodsDTOS
        this.pOrderLogsList = this.purchaseOrder.purchaseOperLogDTOS
      }).catch(response => {
        this.pOrderGoodsLoading = false
        this.pOrderLogsLoading = false
        this.orderInfoLoading = false
        this.$notify.error({
          title: '失败',
          message: '没有此采购单'
        })
      })
    },
    goBackList() {
      this.$router.push({ path: '/purchase/purchaseOrder' })
    },
    handlePrint() {
      // var url = window.location.href.split('#')[0]
      // window.open(`${url}#/printdetail?pOrderId=${this.$route.query.pOrderId}&outbound=5`)
      this.dialogTableVisible = true
      this.pOrderId = this.$route.query.pOrderId
    },
    // 选择条件下载
    toskuInfoExpor() {
      skuInfoExportData(this.$route.query.pOrderId)
    },
    skuHandleExport() {
      this.importDialogVisible = true
      this.importOptLoading = false
      this.$set(this, 'fileName', '')
    },
    skuHandleTongbu() {
      this.tongbuDialogVisible = true
      queryStore().then(response => {
        this.storeList = response.data.data
      }).catch(response => {
        this.$notify.error({
          title: '失败',
          message: '没有'
        })
      })
    },
    toTongbuStore() {
      if (this.dataonLineListSelections.length === 0) {
        this.$notify.error({
          title: '提示',
          message: '请选择门店'
        })
        return
      }
      this.storeForm.storeIds = []
      for (var i = 0; i < this.dataonLineListSelections.length; i++) {
        this.storeForm.storeIds.push(this.dataonLineListSelections[i].id)
      }
      tongbuStore(this.storeForm).then(response => {
        if (response.data.data === 'ok') {
          this.tongbuDialogVisible = false
          this.$notify.success({
            title: '成功',
            message: '同步完成'
          })
        } else {
          this.$notify.error({
            title: '失败',
            message: '同步失败请联系管理员'
          })
        }
      }).catch(response => {
        this.$notify.error({
          title: '失败',
          message: '没有成功'
        })
      })
    },
    checkFile() {
      document.querySelector('#fileinput').click()
    },
    checkFileSure(val) {
      const file = document.querySelector('#fileinput').files[0]
      this.file = file
      this.fileName = file.name
    },
    toImportExcel() {
      this.errList = []
      this.importOptLoading = true
      importExcel(this.file)
        .then(response => {
          const result = response.data
          this.errList = response.data.failResult
          var type = result.errno === 200 ? 'success' : 'error'
          if (result && result.data && result.data !== '') {
            this.successResult = result.data.success
            this.errResult = result.data.fail
            this.allResult = result.data.total
            this.errList = (result.data.fail === 0 ? [] : result.data.failResult)
            this.innerImportDialogVisible = true
          } else {
            this.$notify({
              title: '成功',
              type: type,
              message: response.data.errmsg
            })
          }
          this.importOptLoading = false
        })
        .catch(response => {
          this.$notify.error({
            title: '失败',
            message: response.data.errmsg
          })
          this.importOptLoading = false
          this.errList = []
        })
    }
  }
}
</script>
